<template>
  <div>
    <ToolBar>
      <el-button type="primary" icon="el-icon-plus" size="small" @click = "handleAdd()">添加</el-button>
      <div style="float: right">
        <el-input
                placeholder="搜索标题"
                size="small"
                style="width: 140px;margin-right:8px;"
                v-model="searchParams.postTitle"
                clearable>
        </el-input>
        <el-select v-model="searchParams.postType" size="small" clearable placeholder="请选择分类" style="width: 140px;margin-right:8px;">
          <el-option
                  v-for="(v,k) in postType"
                  :key="k"
                  :label="v"
                  :value="k">
          </el-option>
        </el-select>

        <el-select v-model="searchParams.postStatus" size="small" clearable placeholder="请选择状态" style="width: 120px">
          <el-option
                  v-for="(v,k) in postStatus"
                  :key="k"
                  :label="v"
                  :value="k">
          </el-option>
        </el-select>
        <el-button type="success" icon="el-icon-search" size="small" @click="refresh()"></el-button>
      </div>
    </ToolBar>
    <!-- 列表 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="title" label="标题" width="180">
      </el-table-column>
      <el-table-column prop="address" label="摘要">
      </el-table-column>
      <el-table-column label="操作" :render-header="tableAction" width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="info" icon="el-icon-info" size="small" title = "预览" circle></el-button>
          <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="small" title = "编辑" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <Paginate
        api="postList"
        :params="params"
        :refresh="refreshPage"
        @val-change="PaginateData"
        >
    </Paginate> -->

    <!-- 新增 编辑 -->
    <el-dialog
      :title="dailogTitleType"
      :visible.sync="editDialog"
      width="60%"
      :before-close="handleClose">

      <el-form ref="editNodeFrom" :rules="rules" :model="editNodeFrom" label-width="50px" style = "width:100%">

            <el-form-item label="日期" prop="date" required>
              <el-input v-model="editNodeFrom.date"></el-input>
            </el-form-item>

            <el-form-item label="标题" prop="title" required>
              <el-input v-model="editNodeFrom.title"></el-input>
            </el-form-item>

            <el-form-item label="摘要" prop="address" required>
              <el-input v-model="editNodeFrom.address"></el-input>
            </el-form-item>

            <el-form-item label="内容编辑" prop="address" required>
                <!-- <div class="info">UE编辑器示例<br>需要使用编辑器时，调用UE公共组件即可。可设置填充内容defaultMsg，配置信息config(宽度和高度等)，可调用组件中获取内容的方法。</div>
                <button @click="getUEContent()">获取内容</button> -->
                <!-- <div class="editor-container"> -->
                  <!-- <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE> -->
                  <quill-editor ref="myTextEditor"
                                v-model="content"
                                :options="editorOption"
                                @blur="onEditorBlur($event)"
                                @focus="onEditorFocus($event)"
                                @ready="onEditorReady($event)">
                  </quill-editor>
                <!-- </div> -->
            </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit(editNodeFrom)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import ToolBar from '@/components/ToolBar.vue';
  import HelpHint from '@/components/HelpHint.vue';
  import Paginate from '@/components/Paginate.vue';
  import UE from '@/components/UE.vue';
  import { quillEditor } from 'vue-quill-editor';

  /**
  * quill-editor
  *
  * git:
  * https://github.com/surmon-china/vue-quill-editor
  *
  * 如果需要独立管理附件 可以参考:
  * https://blog.csdn.net/qq_27828675/article/details/80981171
  */
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ 'header': 1 }, { 'header': 2 }],
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],
    [{ 'indent': '-1' }, { 'indent': '+1' }],
    [{ 'direction': 'rtl' }],
    [{ 'size': ['small', false, 'large', 'huge'] }],
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'color': [] }, { 'background': [] }],
    [{ 'font': [] }],
    [{ 'align': [] }],
    ['clean'],
    ['link', 'image', 'video']
  ]
  export default {
    data() {
      return {
        editDialog:false,
        dailogTitleType:'',
        editNodeFrom:{},
        // defaultMsg: '这里是UE测试',
        content: '<h2>I am Example</h2>',
        editorOption: {
         // something config
          theme: 'snow', 
          modules: {
            toolbar: toolbarOptions
          },
          placeholder: 'Insert text here ...',
          readOnly: false
        },
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        dialogStatus:0, //0新增 1编辑
        postList:'',//分页API
        params:{
          pageSize:10,
          current: 2,
        },//分页参数
        refreshPage:false,//分页刷新
        searchParams:{
            postTitle:'',
            postType:'',
            postStatus:'published',
        },
        postStatus:{
            draft:'草稿',
            published:'发布',
            recycled:"垃圾"
        },
        postType:{
            NEW:'最新',
            VUE:'vue相关',
            ELEMENT:'element相关'
        },
        tableData: [],
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ],
          date: [
            { type: 'date', required: true, message: '请输入日期', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      onEditorBlur(editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor)
      },
      onEditorChange({ editor, html, text }) {
        // console.log('editor change!', editor, html, text)
        this.content = html
      },
      // getUEContent() {
      //   /**
      //   * UE测试
      //   * 如果报错类似 语法错误
      //   * 参考 https://www.npmjs.com/package/babel-plugin-transform-remove-strict-mode
      //   */
      //   let content = this.$refs.ue.getUEContent();
      //   this.$notify({
      //     title: '获取成功，可在控制台查看！',
      //     message: content,
      //     type: 'success'
      //   });
      //   console.log(content)
      // },
      handleClick(row) {
        this.$alert(row, '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
      },
      refresh:function(){
        // 搜索
        console.log(this.searchParams)
      },
      PaginateData:function(data){
        // 分页变化
        console.log(data)
      },
      saveEdit(editNodeFrom){
        // 新增/编辑行
        this.$refs.editNodeFrom.validate((valid) => {
          if (valid) {
            this.$axios.get('http://47.104.225.73:8001/User/Login', {params: from}).then((res) => {
              //模拟加载 手动转换数据模型
              if(this.dialogStatus==0){
                this.tableData.push(from)
              }
              this.editNodeFrom = {}
              this.editDialog = false;
            }).catch((err) => {
              console.log(err);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleClose(){
        // 关闭对话框
        this.editNodeFrom = {}
        this.editDialog = false;
      },
      handleEdit(row){
        this.editNodeFrom = row;
        this.dailogTitleType = "编辑列表";
        this.editDialog = true;
        this.dialogStatus = 1;
      },
      handleAdd(){
        this.dailogTitleType = "新增列表";
        this.editDialog = true;
        this.dialogStatus = 0;
      },
      tableAction(){
        // 帮助提示
        return this.$createElement('HelpHint',{
          props:{
            content:'查看文章 / 编辑文章'
          }
        },'操作');
      },
      loadData(){
        // 初始化数据
        var thisData = this.tableData;
        this.$axios.get('http://47.104.225.73:8001/User/Login', {token: 'xxx'}).then((res) => {
          //模拟加载 手动转换数据模型
          this.tableData = [{
            date: '2016-05-03',
            title: '文章标题',
            address: '简介说明简介说明简介说明简介说明简介说明'
          }, {
            date: '2016-05-02',
            title: '文章标题',
            address: '简介说明简介说明简介说明简介说明简介说明'
          }, {
            date: '2016-05-04',
            title: '文章标题',
            address: '简介说明简介说明简介说明简介说明简介说明'
          }]
        }).catch((err) => {
              console.log(err);
        })
      },
      init:function(){
        this.loadData()
      }
    },
    computed: {
      editor() {
        return this.$refs.myTextEditor.quillEditor
      }
    },
    components: {
        ToolBar,HelpHint,Paginate,quillEditor
    },
    mounted:function(){
      this.init()
    }
  }
</script>

<style lang="less" scoped>
  .pagination {
    padding: 7px;
    border: 1px solid #ebeef5;
    background: #fff;
    text-align: right;
  }
  .total {
    float: left;
    margin-top: 8px;
    margin-left: 10px;
    font-size: 13px;
    color: #606266;
  }
</style>